<template>
    <view>
        <view class="m-user-background">
            <view class="m-user-header m-row-margin-max">
                <image class="m-user-header-img" :src="user?.headImageUrl"></image>
            </view>
            <view class="m-user-info">
                <view class="m-user-info-nick m-col-margin-sm">{{ user?.nickName }}</view>
                <view class="m-user-info-desc">{{ user?.userDesc }}</view>
            </view>
        </view>
        <view class="m-user-content">
            <view class="m-user-vip">
                <view class="m-user-vip-info">
                    <view class="m-user-info-nick m-col-margin-sm">{{ vip?.title }}</view>
                    <view class="m-user-info-desc">{{ vip?.subTitle }}</view>
                </view>
                <button @click="" class="m-user-vip-button" size="mini">立即开通</button>
            </view>
            <SimpleCard>
                <view class="m-icon-btn-box">
                    <view class="m-icon-btn">
                        <uni-icons custom-prefix="iconfont" type="icon-dingdan" size="30" />
                        <text class="m-icon-btn-text">我的订单</text>
                    </view>
                    <view class="m-icon-btn">
                        <uni-icons custom-prefix="iconfont" type="icon-kuaijiezhifu" size="30" />
                        <text class="m-icon-btn-text">待付款</text>
                    </view>
                    <view class="m-icon-btn">
                        <uni-icons custom-prefix="iconfont" type="icon-huoche" size="30" />
                        <text class="m-icon-btn-text">待收货</text>
                    </view>
                    <view class="m-icon-btn">
                        <uni-icons custom-prefix="iconfont" type="icon-dingdan-yiwancheng" size="30" />
                        <text class="m-icon-btn-text">已完成</text>
                    </view>
                </view>
            </SimpleCard>
            <SimpleCard>
                <view class="m-user-item">
                    <uni-icons custom-prefix="iconfont" type="icon-youhuiquan" size="18" />
                    <text class="m-row-margin-base">优惠券</text>
                    <text class="m-user-item-right-text m-row-margin-sm">{{ user?.couponCount }} 张</text>
                    <uni-icons custom-prefix="iconfont" type="icon-jinru" size="18" />
                </view>
                <view class="m-user-item">
                    <uni-icons custom-prefix="iconfont" type="icon-a-jintie2" size="18" />
                    <text class="m-row-margin-base">购物津贴</text>
                    <text class="m-user-item-right-text m-row-margin-sm">￥{{ user?.allowance }}</text>
                    <uni-icons custom-prefix="iconfont" type="icon-jinru" size="18" />
                </view>
                <view class="m-user-item">
                    <uni-icons custom-prefix="iconfont" type="icon-dizhiguanli" size="18" />
                    <text class="m-row-margin-base">地址管理</text>
                    <uni-icons class="m-user-item-right-align" custom-prefix="iconfont" type="icon-jinru" size="18" />
                </view>
                <view class="m-user-item">
                    <uni-icons custom-prefix="iconfont" type="icon-kefu" size="18" />
                    <text class="m-row-margin-base">在线客服</text>
                    <uni-icons class="m-user-item-right-align" custom-prefix="iconfont" type="icon-jinru" size="18" />
                </view>
                <view class="m-user-item">
                    <uni-icons custom-prefix="iconfont" type="icon-bangzhuyushuoming" size="24" />
                    <text class="m-row-margin-base">帮助与反馈</text>
                    <uni-icons class="m-user-item-right-align" custom-prefix="iconfont" type="icon-jinru" size="18" />
                </view>
            </SimpleCard>
            <view class="m-user-content-service">
                <uni-icons class="m-row-margin-sm" custom-prefix="iconfont" type="icon-dianhua" size="14" />
                <text>时尚服务热线：400-009-6666</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getUserInfo, getVipInfo } from '@/api/user'
import { ref, reactive, shallowRef } from 'vue'
import SimpleCard from '@/components/common/MSimpleCard.vue'
const user = shallowRef<User>()
const vip = shallowRef<VIP>()
Promise.all([getUserInfo(), getVipInfo()]).then((res) => {
    user.value = res[0].data
    vip.value = res[1].data
})
</script>

<style lang="scss" scoped>
@import '@/static/font/iconfont.css';
$color-jinse: rgb(233 190 79);
page {
    background-color: $uni-bg-color-hover;
}
.m-user-background {
    width: 100%;
    height: 300rpx;
    background-image: radial-gradient(circle, rgb(0, 0, 0), rgb(80, 80, 80));
    display: flex;
    align-items: center;
}
.m-user-header {
    border-radius: $uni-border-radius-circle;
    border: 4rpx solid white;
    overflow: hidden;
}
.m-user-header-img {
    height: 160rpx;
    width: 160rpx;
}
.m-user-info {
    line-height: $uni-font-size-title;
    color: white;
}
.m-user-info-nick {
    font-size: $uni-font-size-lg;
    font-weight: 700;
}
.m-user-info-desc {
    font-size: $uni-font-size-base;
    font-weight: 700;
}
.m-user-content {
    margin-top: -40rpx;
}
.m-user-vip {
    border-radius: $uni-border-radius-lg;
    margin: $uni-spacing-row-sm;
    background-image: linear-gradient(to right, rgb(243, 239, 225), $color-jinse);
    color: $uni-color-title;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 160rpx;
    padding: 0 $uni-spacing-row-max;
}
.m-user-vip-button {
    border-radius: $uni-border-radius-lg;
    background-color: black;
    color: $color-jinse;
    margin: 0;
}
.m-icon-btn {
    color: black;
    font-size: $uni-font-size-base;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.m-icon-btn-text {
    margin-top: $uni-spacing-row-sm;
}
.m-icon-btn-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.m-user-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    color: black;
    line-height: $uni-font-size-title;
    padding: $uni-spacing-col-lg 0;
}
.m-user-item-right-text {
    margin-left: auto;
}
.m-user-item-right-align {
    margin-left: auto;
}
.m-user-content-service {
    margin: $uni-spacing-col-lg 0;
    text-align: center;
    line-height: $uni-font-size-subtitle;
    color: black;
    font-size: $uni-font-size-base;
}
</style>
